<template>
    <div class="w-full h-full">
        <div class="w-2/3  m-auto pt-10 flex justify-center text-2xl">
            {{ videoItem.title }}
        </div>
        <div class="w-2/3 h-full m-auto">
            <div class="m-auto w-full flex justify-center pt-10">
                <vue3VideoPlay v-bind="options">
                </vue3VideoPlay>
            </div>

        </div>

    </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { reactive } from 'vue';
const route = useRoute()

const query = route.query
let videoItem = JSON.parse(query.videoInfo)
const options = reactive({
    width: "800px", //播放器宽度
    height: "600px", //播放器高度
    color: "#409eff", //主题色
    title: videoItem.title, //视频名称
    src: videoItem.url, //视频源
    muted: false, //静音
    webFullScreen: false,
    speed:true,
    speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
    autoPlay: false, //自动播放
    loop: false, //循环播放
    mirror: false, //镜像画面
    ligthOff: false, //关灯模式
    volume: 0.3, //默认音量大小
    control: true, //是否显示控制
    controlBtns: [
        "audioTrack",
        "quality",
        "speedRate",
        "volume",
        "setting",
        "pip",
        "pageFullScreen",
        "fullScreen",
    ], //显示所有按钮,
});
</script>